<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>贝塞尔曲线</title>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [{
          id: 'node0',
          x: 200,
          y: 10,
          size: 10
        },
        {
          id: 'node1',
          x: 200,
          y: 50,
          label: '1222',
          shape: 'my-rect'
        },
        {
          id: 'node2',
          x: 150,
          y: 150,
          shape: 'my-rect'
        },
        {
          id: 'node3',
          x: 250,
          y: 150,
          shape: 'my-rect'
        },
        {
          id: 'node4',
          x: 200,
          y: 250,
          shape: 'my-rect'
        },
        {
          id: 'node5',
          x: 300,
          y: 300,
          label: '5',
          anchorPoints: [[0, 0.5], [1, 0.5]]
        },
        {
          id: 'node6',
          x: 400,
          y: 250,
          label: '6',
          anchorPoints: [[0, 0.5], [1, 0.5]]
        },
        {
          id: 'node7',
          x: 400,
          y: 350,
          label: '7',
          anchorPoints: [[0, 0.5], [1, 0.5]]
        }],
        edges: [{
          source: 'node0',
          target: 'node1'
        },
        {
          source: 'node1',
          target: 'node2',
          shape: 'cubic-vertical'
        },
        {
          source: 'node1',
          target: 'node3',
          shape: 'cubic-vertical'
        },
        {
          source: 'node2',
          target: 'node4',
          shape: 'cubic-vertical'
        },
        {
          source: 'node3',
          target: 'node4',
          shape: 'cubic-vertical'
        },
        {
          source: 'node5',
          target: 'node6',
          shape: 'cubic-horizontal'
        },
        {
          source: 'node5',
          target: 'node7',
          shape: 'cubic-horizontal'
        }]
      };
      G6.registerNode('my-rect', {
        getAnchorPoints() {
          return [[0.5, 0], [0.5, 1]]
        }
      },
      'rect');

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600
      });
      graph.data(data);
      graph.render();
     </script>
  </body>

</html>